<template>
  <view class="balan">
    <view class="balance" v-for="item in mx" :key="item.id">
      <view class="balan-left">
        <view class="balance_title">{{ item.title }}</view>
        <view class="balance_titme">{{ item.time }}</view>
      </view>
      <view
        class="balan-right"
        :style="{ color: item.id === 0 ? '#089090' : 'red' }"
        >{{ item.money }}</view
      >
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const mx = ref([
  { id: 0, title: "充值", time: "2022-01-30  08:12", money: "+20" },
  { id: 1, title: "消费", time: "2022-01-30  08:12", money: "-20" },
  { id: 0, title: "返现", time: "2022-01-30  08:12", money: "+20" },
]);
</script>

<style lang="scss">
@import url(./balan.css);
</style>
